<template>
	<view class="page bg-fff">
		<view class="topBannerWrap bg"></view>

		<view class="contentBody">
			<up-search v-model="keyword" placeholder="输入您想查看的楼盘名称" height="40" shape="round" borderColor="#E5E5E5" :showAction="false" bgColor="#FFFFFF" @change="clickSearch" @search="clickSearch"></up-search>
			<view class="listWrap boxShadow bg-fff top-15">
				<view class="listItem border-bottom-grey bottom-10" @click="toDetail(item)" v-for="(item, index) in listData" :key="index">
					<image class="leftImg" :src="item.image_list[0]?.url" mode="aspectFill" :lazy-load="true"></image>
					<view class="contentWrap bg-theme-opacity top-10">
						<view class="title text-center txtHidden fontBold">{{ item.title }}</view>
					</view>
				</view>
			</view>
		</view>

		<up-loadmore :status="loadingType" v-if="listData.length > 0" />

		<up-empty text="暂无数据" marginTop="100" mode="list" v-if="listData.length === 0 && loadingType === 'nomore'"></up-empty>
		<up-gap :height="40" />
	</view>
</template>

<script setup>
import { ref } from "vue";
import { useUserInfoStore } from '@/store/index';
import { onLoad, onShareAppMessage, onShareTimeline, onReachBottom } from '@dcloudio/uni-app';
import { getDiscountList } from '@/common/api/tools';

const userInfoStore = useUserInfoStore();

const keyword = ref('');

//列表
let listData = ref([]);
let next = ref('');
let loadingType = ref('loadmore');

// 页面加载
onLoad((options) => {
	uni.$check_and_login(init)
})

// 监听页面滚动到底部
onReachBottom(() => {
	if (loadingType.value === 'loadmore') {
		init();
	}
});

// 分享到好友
onShareAppMessage(() => {
	return {
		title: '最新优惠信息',
		path: `/pages/products/huan-xian/index?puid=${userInfoStore.userInfo.id}`,
		imageUrl: '',
	}
})

// 分享到朋友圈
onShareTimeline(() => {
	return {
		title: '最新优惠信息',
		query: `puid=${userInfoStore.userInfo.id}`
	}
})

//初始化
async function init(isRefresh=false) {
	if(isRefresh) {
		loadingType.value = 'loadmore';
		next.value = '';
	}
	if (loadingType.value === 'loading' || loadingType.value === 'nomore') return;
	
	try {
		loadingType.value = 'loading';
		let url = (next.value ? next.value : `/product/mall/v6/discount?query=${keyword.value}`);

		const res = await getDiscountList(url);
		if(res.status !== 0) {
			uni.$u.toast(res.detail);
			return
		}
		if(isRefresh) {
			listData.value = res.detail.results;
		}else{
			listData.value.push(...res.detail.results);
		}
		next.value = res.detail.next;
		loadingType.value = res.detail.next ? 'loadmore' : 'nomore';	
	} catch (error) {}
}

// 搜索
async function clickSearch() {
	await init(true);
}

//跳转详情
function toDetail(info) {
	uni.navigateTo({
        url: `/pages/tools/you-hui/detail/index?productId=${info.id}`
    })
}
</script>

<style lang="scss" scoped>
.page{
	min-height: 100vh;
	overflow: hidden;
	.topBannerWrap{
		// margin: 28rpx 0;
		position: relative;
		height: 260rpx;
		background-image: url("https://image.srea.org.cn/xcx/zuixin-youhui-top-bg.jpg");
	}
	.contentBody{
		position: relative;
		z-index: 10;
		margin: -100rpx 20rpx 0 20rpx;
	}
	.listWrap{
		padding: 50rpx 20rpx;
		border-radius: 20rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		.listItem{
			width: 100%;
			overflow: hidden; // 防止内容溢出
			.leftImg{
				display: block; // 避免图片底部有空隙
				width: 100%;
				height: 182rpx;
				border-radius: 10rpx;
			}
			.contentWrap{
				padding: 10rpx 0;
				border-radius: 10rpx;
			}
		}
	}
}
</style>